<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-08-28 19:32:19
-->
<template>
  <div class="map-container">
    <MiningMap       
      @ready="ready"
      :customContextMenus="customContextMenus"
      :useContextMenu="customContextMenus.length > 0"
>
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
      ></MiningTiandituLayer>
      <MiningVectorLayer :featureStyle="style">
        <MiningLineString :feature="feature"></MiningLineString>
      </MiningVectorLayer>
    </MiningMap>
     
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'

import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningLineString from 'mining-map/Features/LineString';
import { TiandituKey,CityCoordinates } from '@/config/config.js';
import MousePosition  from 'mining-map/Actions/MousePosition'
import SplitAction from './SplitAction';

import Feature from 'ol/Feature';
import LineString from 'ol/geom/LineString';
import { Style, Stroke as StrokeStyle } from 'ol/style';

export default {
  name: 'SplitAction',
  title: '线段切分交互插件',
  parentTitle: '交互插件',
  components: {
    MiningMap,
    MiningTiandituLayer, 
    MiningVectorLayer,
    MiningLineString
  },
  data () {
    
    const feature = new Feature({
      geometry: new LineString([
        CityCoordinates.BeiJing,
        CityCoordinates.TianJin,
        CityCoordinates.ShangHai,
        CityCoordinates.XiAn
      ]),
      name: 'AirLine',
    });
    const style = new Style({
      stroke: new StrokeStyle({
        color: 'green',
        width: 1,
      }),
    })
    return {
      key: TiandituKey ,
      center: [],
      customContextMenus: [
        
      ],
      map: null,
      feature,
      style,
    }
  },
  methods: {
    ready ({map, vmap}) {
      this.map = vmap
      const action = this.action = new MousePosition(map); 

      const sAction = new SplitAction() 
      sAction.on('contextmenu', this.contextmenu)

      vmap.addActions(sAction)   // 阻止后添加的Action出发事件
      vmap.addActions(action) 
      
    }, 
    contextmenu (evt) { 
       console.log(evt)
       this.map.showContentMenu(evt.coordinate,[ {
          name: '分段',
          handler:this.split
        }])
    },
    split() {
      let linestring = this.feature.getGeometry().clone();
      let startIndex = 0;
      let endIndex =2;
      if (startIndex > endIndex) {
        [startIndex, endIndex] = [endIndex, startIndex];
      }
	    let coordinates = linestring.getCoordinates();
	    coordinates = coordinates.slice(startIndex, endIndex + 1);
      linestring.setCoordinates(coordinates)
      this.feature = new Feature({ geometry:linestring, name: 'AirLine'})
    }
  }

}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  .coordinate {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 5px;
  }
} 
</style>